window.onload = () => {
  const allBtn = document.querySelector(".all")
  const cancelBtn = document.querySelector(".cancel")
  const toggleBtn = document.querySelector(".toggle")
  const submitBtn = document.querySelector("input[type='submit']")



  allBtn.onclick = () => {
    const lists = document.querySelectorAll("input[type='checkbox']")
    lists.forEach(item => {
      item.checked = true
    })
  }

  cancelBtn.onclick = () => {
    const lists = document.querySelectorAll("input[type='checkbox']")
    lists.forEach(item => {
      item.checked = false
    })
  }

  toggleBtn.onclick = () => {
    const lists = document.querySelectorAll("input[type='checkbox']")
    lists.forEach(item => {
      item.checked = !item.checked
    })
  }

  submitBtn.onclick = (evt) => {
    evt.preventDefault()
    const usernameEl = document.querySelector("input[id='name']")
    const userGradeEl = document.querySelector("input[id='grade']")

    const trEl = document.createElement("tr")
    trEl.innerHTML = `
        <td>
          <input type="checkbox">
        </td>
        <td>${usernameEl.value}</td>
        <td>${userGradeEl.value}</td>
    `
    const tbodyEl = document.querySelector("tbody")
    tbodyEl.append(trEl)

  }
}

